import {
    Table,
    Button,
    Popconfirm,
    Form,
    InputNumber,
    Select,
    Divider,
    Input,
    DatePicker,
    Checkbox,
  } from 'antd';
  import React, { Component } from 'react';
  import BaseComponent from '@/components/BaseComponent';
  import styles from './index.less';
  import styled from 'styled-components';
  
  const { Option } = Select;
  
  const FormItemBox = styled.div`
    display: flex;
    align-items: center;
  `;
  
  /**
   * 内镜详情
   */
  @Form.create()
  class EsophagusView extends BaseComponent {
    constructor(props) {
      super(props);
      this.state = {
        form: [],
        data: [
          {
            id: this.generateId(),
          },
        ],
        columns: [],
        // 报告单存放地址
        reportFilePath: '',
        // 报告单url访问地址
        reportFileUrl: '',
        // 是否正在上传
        isUploading: false,
      };
    }
  
    componentDidMount() {
      console.log(this.props);
      const { sg } = this.props;
  
      if (sg !== undefined) {
        this.setState({
          data: sg,
        });
      }
      this.getColumns();
    }
  
    /**
     * 返回用户输入
     * @returns {*}
     */
    getUserInput = () => {
      const { form } = this.props;
      const { data } = this.state;
  
      const size = data.length;
      const values = form.getFieldsValue();
      console.log(values, 'values');
      const keys = Object.keys(values);
  
      const result = [];
  
      for (let i = 0; i < size; i++) {
        let obj = {};
        const ownKeys = keys.filter(each => {
          const tmp = each.split('-');
          const index = tmp[1];
          return index == i;
        });
        ownKeys.forEach(key => {
          const realKey = key.split('-')[0];
          obj[`${realKey}`] = values[key];
        });
        result.push(obj);
      }
      console.log('resultresultresultresult', result);
      // this.props.handleChildData(result);
      return result;
    };
  
    getColumns = () => {
      const { form, disabled = false } = this.props;
      const { getFieldDecorator } = form;
      let cs = [
        {
          title: '随访次数',
          render: (text, record, index) => {
            const { number } = record;
            return (
              <FormItemBox style={{ width: '100px' }}>
                <Form.Item>
                  {getFieldDecorator(`number-${index}`, {
                    initialValue: number,
                  })(
                    <div>
                      <Input
                        disabled={disabled}
                        placeholder={'请输入'}
                        style={{ width: '100px', marginRight: '8px' }}
                        onChange={this.saveData}
                      />
                    </div>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
        {
          title: '计划随访日期',
          render: (text, record, index) => {
            const { planTime } = record;
            console.log(record, 'record');
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`planTime-${index}`, {
                    initialValue: planTime,
                  })(
                    <div>
                      <DatePicker
                        disabled={disabled}
                        showTime
                        format="YYYY-MM-DD"
                        placeholder={'请选择'}
                        style={{ width: '120px' }}
                        onChange={this.saveData}
                      />
                    </div>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
        {
          title: '实际随访时间',
          render: (text, record, index) => {
            const { actualTime } = record;
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`actualTime-${index}`, {
                    initialValue: actualTime,
                  })(
                    <div>
                      <DatePicker
                        disabled={disabled}
                        showTime
                        format="YYYY-MM-DD"
                        placeholder={'请选择'}
                        style={{ width: '120' }}
                        onChange={this.saveData}
                      />
                    </div>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
  
        {
          title: '食管最高病例代码',
          render: (text, record, index) => {
            const { esophagus } = record;
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`esophagus-${index}`, {
                    initialValue: esophagus,
                  })(
                    <Select
                      disabled={disabled}
                      placeholder="请选择"
                      style={{ width: '150px' }}
                      onSelect={this.saveData}
                    >
                      <Option key="1" value={'1'}>
                        正常腺上皮
                      </Option>
                      <Option key={'2'} value={'2'}>
                        非萎缩性胃炎
                      </Option>
                      <Option key={'181'} value={'181'}>
                        轻-中度萎缩性胃炎
                      </Option>
                      <Option key={'182'} value={'182'}>
                        重度萎缩性胃炎
                      </Option>
                      <Option key={'183'} value={'183'}>
                        轻-中度肠上皮化生
                      </Option>
                      <Option key={'184'} value={'184'}>
                        重度肠上皮化生
                      </Option>
                      <Option key={'185'} value={'185'}>
                        贲门肠上皮化生
                      </Option>
                      <Option key={'186'} value={'186'}>
                        Barrett食管
                      </Option>
                      <Option key={'19'} value={'19'}>
                        不确定的腺上皮上皮内瘤变
                      </Option>
                      <Option key={'20'} value={'20'}>
                        腺上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'21'} value={'21'}>
                        腺上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'221'} value={'221'}>
                        黏膜内腺癌
                      </Option>
                      <Option key={'222'} value={'222'}>
                        黏膜下层腺癌
                      </Option>
                      <Option key={'23'} value={'23'}>
                        腺癌
                      </Option>
                      <Option key={'24'} value={'24'}>
                        腺鳞癌
                      </Option>
                      <Option key={'25'} value={'25'}>
                        神经内分泌癌（NEC，包括小细胞癌、大细胞神经内分泌癌）
                      </Option>
                      <Option key={'26'} value={'26'}>
                        神经内分泌肿瘤（NET G1、G2、G3）
                      </Option>
                      <Option key={'27'} value={'27'}>
                        癌不能分类（NOS）
                      </Option>
                      <Option key={'28'} value={'28'}>
                        淋巴瘤
                      </Option>
                      <Option key={'29'} value={'29'}>
                        间叶来源肿瘤
                      </Option>
                      <Option key={'30'} value={'30'}>
                        食管鳞状上皮乳头状瘤
                      </Option>
                      <Option key={'31'} value={'31'}>
                        胃底腺息肉
                      </Option>
                      <Option key={'32'} value={'32'}>
                        增生性息肉
                      </Option>
                      <Option key={'33'} value={'33'}>
                        其它
                      </Option>
                      <Option key={'99'} value={'99'}>
                        不足以作诊断
                      </Option>
                      <Option key={'1'} value={'1'}>
                        正常鳞状上皮
                      </Option>
                      <Option key={'4'} value={'4'}>
                        基底细胞增生
                      </Option>
                      <Option key={'5'} value={'5'}>
                        轻度食管炎
                      </Option>
                      <Option key={'6'} value={'6'}>
                        中度食管炎
                      </Option>
                      <Option key={'7'} value={'7'}>
                        重度食管炎
                      </Option>
                      <Option key={'8'} value={'8'}>
                        鳞状上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'10'} value={'10'}>
                        鳞状上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'11'} value={'11'}>
                        鳞状上皮上皮内瘤变不能分类（NOS）
                      </Option>
                      <Option key={'13'} value={'13'}>
                        鳞状上皮高级别上皮内瘤变可疑浸润
                      </Option>
                      <Option key={'141'} value={'141'}>
                        黏膜内鳞状细胞癌
                      </Option>
                      <Option key={'142'} value={'142'}>
                        黏膜下层鳞状细胞癌
                      </Option>
                      <Option key={'15'} value={'15'}>
                        鳞状细胞癌
                      </Option>
                    </Select>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
  
        {
          title: '贲门最高病理代码',
          render: (text, record, index) => {
            const { cardia } = record;
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`cardia-${index}`, {
                    initialValue: cardia,
                  })(
                    <Select
                      disabled={disabled}
                      placeholder="请选择"
                      style={{ width: '150px' }}
                      onSelect={this.saveData}
                    >
                      <Option key="1" value={'1'}>
                        正常腺上皮
                      </Option>
                      <Option key={'2'} value={'2'}>
                        非萎缩性胃炎
                      </Option>
                      <Option key={'181'} value={'181'}>
                        轻-中度萎缩性胃炎
                      </Option>
                      <Option key={'182'} value={'182'}>
                        重度萎缩性胃炎
                      </Option>
                      <Option key={'183'} value={'183'}>
                        轻-中度肠上皮化生
                      </Option>
                      <Option key={'184'} value={'184'}>
                        重度肠上皮化生
                      </Option>
                      <Option key={'185'} value={'185'}>
                        贲门肠上皮化生
                      </Option>
                      <Option key={'186'} value={'186'}>
                        Barrett食管
                      </Option>
                      <Option key={'19'} value={'19'}>
                        不确定的腺上皮上皮内瘤变
                      </Option>
                      <Option key={'20'} value={'20'}>
                        腺上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'21'} value={'21'}>
                        腺上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'221'} value={'221'}>
                        黏膜内腺癌
                      </Option>
                      <Option key={'222'} value={'222'}>
                        黏膜下层腺癌
                      </Option>
                      <Option key={'23'} value={'23'}>
                        腺癌
                      </Option>
                      <Option key={'24'} value={'24'}>
                        腺鳞癌
                      </Option>
                      <Option key={'25'} value={'25'}>
                        神经内分泌癌（NEC，包括小细胞癌、大细胞神经内分泌癌）
                      </Option>
                      <Option key={'26'} value={'26'}>
                        神经内分泌肿瘤（NET G1、G2、G3）
                      </Option>
                      <Option key={'27'} value={'27'}>
                        癌不能分类（NOS）
                      </Option>
                      <Option key={'28'} value={'28'}>
                        淋巴瘤
                      </Option>
                      <Option key={'29'} value={'29'}>
                        间叶来源肿瘤
                      </Option>
                      <Option key={'30'} value={'30'}>
                        食管鳞状上皮乳头状瘤
                      </Option>
                      <Option key={'31'} value={'31'}>
                        胃底腺息肉
                      </Option>
                      <Option key={'32'} value={'32'}>
                        增生性息肉
                      </Option>
                      <Option key={'33'} value={'33'}>
                        其它
                      </Option>
                      <Option key={'99'} value={'99'}>
                        不足以作诊断
                      </Option>
                      <Option key={'1'} value={'1'}>
                        正常鳞状上皮
                      </Option>
                      <Option key={'4'} value={'4'}>
                        基底细胞增生
                      </Option>
                      <Option key={'5'} value={'5'}>
                        轻度食管炎
                      </Option>
                      <Option key={'6'} value={'6'}>
                        中度食管炎
                      </Option>
                      <Option key={'7'} value={'7'}>
                        重度食管炎
                      </Option>
                      <Option key={'8'} value={'8'}>
                        鳞状上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'10'} value={'10'}>
                        鳞状上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'11'} value={'11'}>
                        鳞状上皮上皮内瘤变不能分类（NOS）
                      </Option>
                      <Option key={'13'} value={'13'}>
                        鳞状上皮高级别上皮内瘤变可疑浸润
                      </Option>
                      <Option key={'141'} value={'141'}>
                        黏膜内鳞状细胞癌
                      </Option>
                      <Option key={'142'} value={'142'}>
                        黏膜下层鳞状细胞癌
                      </Option>
                      <Option key={'15'} value={'15'}>
                        鳞状细胞癌
                      </Option>
                    </Select>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
  
        {
          title: '胃最高病理代码',
          render: (text, record, index) => {
            const { stomach } = record;
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`stomach-${index}`, {
                    initialValue: stomach,
                  })(
                    <Select
                      disabled={disabled}
                      placeholder="请选择"
                      style={{ width: '150px' }}
                      onSelect={this.saveData}
                    >
                      <Option key="1" value={'1'}>
                        正常腺上皮
                      </Option>
                      <Option key={'2'} value={'2'}>
                        非萎缩性胃炎
                      </Option>
                      <Option key={'181'} value={'181'}>
                        轻-中度萎缩性胃炎
                      </Option>
                      <Option key={'182'} value={'182'}>
                        重度萎缩性胃炎
                      </Option>
                      <Option key={'183'} value={'183'}>
                        轻-中度肠上皮化生
                      </Option>
                      <Option key={'184'} value={'184'}>
                        重度肠上皮化生
                      </Option>
                      <Option key={'185'} value={'185'}>
                        贲门肠上皮化生
                      </Option>
                      <Option key={'186'} value={'186'}>
                        Barrett食管
                      </Option>
                      <Option key={'19'} value={'19'}>
                        不确定的腺上皮上皮内瘤变
                      </Option>
                      <Option key={'20'} value={'20'}>
                        腺上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'21'} value={'21'}>
                        腺上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'221'} value={'221'}>
                        黏膜内腺癌
                      </Option>
                      <Option key={'222'} value={'222'}>
                        黏膜下层腺癌
                      </Option>
                      <Option key={'23'} value={'23'}>
                        腺癌
                      </Option>
                      <Option key={'24'} value={'24'}>
                        腺鳞癌
                      </Option>
                      <Option key={'25'} value={'25'}>
                        神经内分泌癌（NEC，包括小细胞癌、大细胞神经内分泌癌）
                      </Option>
                      <Option key={'26'} value={'26'}>
                        神经内分泌肿瘤（NET G1、G2、G3）
                      </Option>
                      <Option key={'27'} value={'27'}>
                        癌不能分类（NOS）
                      </Option>
                      <Option key={'28'} value={'28'}>
                        淋巴瘤
                      </Option>
                      <Option key={'29'} value={'29'}>
                        间叶来源肿瘤
                      </Option>
                      <Option key={'30'} value={'30'}>
                        食管鳞状上皮乳头状瘤
                      </Option>
                      <Option key={'31'} value={'31'}>
                        胃底腺息肉
                      </Option>
                      <Option key={'32'} value={'32'}>
                        增生性息肉
                      </Option>
                      <Option key={'33'} value={'33'}>
                        其它
                      </Option>
                      <Option key={'99'} value={'99'}>
                        不足以作诊断
                      </Option>
                      <Option key={'1'} value={'1'}>
                        正常鳞状上皮
                      </Option>
                      <Option key={'4'} value={'4'}>
                        基底细胞增生
                      </Option>
                      <Option key={'5'} value={'5'}>
                        轻度食管炎
                      </Option>
                      <Option key={'6'} value={'6'}>
                        中度食管炎
                      </Option>
                      <Option key={'7'} value={'7'}>
                        重度食管炎
                      </Option>
                      <Option key={'8'} value={'8'}>
                        鳞状上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'10'} value={'10'}>
                        鳞状上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'11'} value={'11'}>
                        鳞状上皮上皮内瘤变不能分类（NOS）
                      </Option>
                      <Option key={'13'} value={'13'}>
                        鳞状上皮高级别上皮内瘤变可疑浸润
                      </Option>
                      <Option key={'141'} value={'141'}>
                        黏膜内鳞状细胞癌
                      </Option>
                      <Option key={'142'} value={'142'}>
                        黏膜下层鳞状细胞癌
                      </Option>
                      <Option key={'15'} value={'15'}>
                        鳞状细胞癌
                      </Option>
                    </Select>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
        {
          title: '十二指肠最高病理代码',
          render: (text, record, index) => {
            const { duodenum } = record;
            return (
              <FormItemBox>
                <Form.Item>
                  {getFieldDecorator(`duodenum-${index}`, {
                    initialValue: duodenum,
                  })(
                    <Select
                      disabled={disabled}
                      placeholder="请选择"
                      style={{ width: '150px' }}
                      onSelect={this.saveData}
                    >
                      <Option key="1" value={'1'}>
                        正常腺上皮
                      </Option>
                      <Option key={'2'} value={'2'}>
                        非萎缩性胃炎
                      </Option>
                      <Option key={'181'} value={'181'}>
                        轻-中度萎缩性胃炎
                      </Option>
                      <Option key={'182'} value={'182'}>
                        重度萎缩性胃炎
                      </Option>
                      <Option key={'183'} value={'183'}>
                        轻-中度肠上皮化生
                      </Option>
                      <Option key={'184'} value={'184'}>
                        重度肠上皮化生
                      </Option>
                      <Option key={'185'} value={'185'}>
                        贲门肠上皮化生
                      </Option>
                      <Option key={'186'} value={'186'}>
                        Barrett食管
                      </Option>
                      <Option key={'19'} value={'19'}>
                        不确定的腺上皮上皮内瘤变
                      </Option>
                      <Option key={'20'} value={'20'}>
                        腺上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'21'} value={'21'}>
                        腺上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'221'} value={'221'}>
                        黏膜内腺癌
                      </Option>
                      <Option key={'222'} value={'222'}>
                        黏膜下层腺癌
                      </Option>
                      <Option key={'23'} value={'23'}>
                        腺癌
                      </Option>
                      <Option key={'24'} value={'24'}>
                        腺鳞癌
                      </Option>
                      <Option key={'25'} value={'25'}>
                        神经内分泌癌（NEC，包括小细胞癌、大细胞神经内分泌癌）
                      </Option>
                      <Option key={'26'} value={'26'}>
                        神经内分泌肿瘤（NET G1、G2、G3）
                      </Option>
                      <Option key={'27'} value={'27'}>
                        癌不能分类（NOS）
                      </Option>
                      <Option key={'28'} value={'28'}>
                        淋巴瘤
                      </Option>
                      <Option key={'29'} value={'29'}>
                        间叶来源肿瘤
                      </Option>
                      <Option key={'30'} value={'30'}>
                        食管鳞状上皮乳头状瘤
                      </Option>
                      <Option key={'31'} value={'31'}>
                        胃底腺息肉
                      </Option>
                      <Option key={'32'} value={'32'}>
                        增生性息肉
                      </Option>
                      <Option key={'33'} value={'33'}>
                        其它
                      </Option>
                      <Option key={'99'} value={'99'}>
                        不足以作诊断
                      </Option>
                      <Option key={'1'} value={'1'}>
                        正常鳞状上皮
                      </Option>
                      <Option key={'4'} value={'4'}>
                        基底细胞增生
                      </Option>
                      <Option key={'5'} value={'5'}>
                        轻度食管炎
                      </Option>
                      <Option key={'6'} value={'6'}>
                        中度食管炎
                      </Option>
                      <Option key={'7'} value={'7'}>
                        重度食管炎
                      </Option>
                      <Option key={'8'} value={'8'}>
                        鳞状上皮低级别上皮内瘤变
                      </Option>
                      <Option key={'10'} value={'10'}>
                        鳞状上皮高级别上皮内瘤变
                      </Option>
                      <Option key={'11'} value={'11'}>
                        鳞状上皮上皮内瘤变不能分类（NOS）
                      </Option>
                      <Option key={'13'} value={'13'}>
                        鳞状上皮高级别上皮内瘤变可疑浸润
                      </Option>
                      <Option key={'141'} value={'141'}>
                        黏膜内鳞状细胞癌
                      </Option>
                      <Option key={'142'} value={'142'}>
                        黏膜下层鳞状细胞癌
                      </Option>
                      <Option key={'15'} value={'15'}>
                        鳞状细胞癌
                      </Option>
                    </Select>
                  )}
                </Form.Item>
              </FormItemBox>
            );
          },
        },
  
        {
          title: '操作',
          width: 160,
          fixed: 'right',
          render: (text, record, index) => {
            return disabled ? null : (
              <div style={{ textAlign: 'left' }}>
                <Button
                  style={{ marginRight: '8px' }}
                  type="primary"
                  size={'small'}
                  onClick={() => this.handleAdd()}
                >
                  添加
                </Button>
                <Popconfirm
                  title="确定执行当前操作吗?"
                  onConfirm={() => this.handleDelete(record.id)}
                >
                  <Button type="danger" size={'small'}>
                    删除
                  </Button>
  
                  {/* <Button type="danger" size={'small'} onChange={this.saveData}>
                    保存
                  </Button> */}
                </Popconfirm>
              </div>
            );
          },
        },
      ];
      this.setState({
        columns: cs,
      });
    };
  
    handleDelete = id => {
      const data = [...this.state.data];
      if (data.length === 1) {
        this.errorMessage('至少保留一行！');
        return;
      }
      this.setState({
        data: data.filter(item => item.id !== id),
      });
    };
  
    handleAdd = () => {
      const { data } = this.state;
      const newData = {
        id: this.generateId(),
      };
      this.setState({
        data: [...data, newData],
      });
    };
  
    saveData = e => {
  
  
      this.props.handleChildData(this.getUserInput());
  
    };
  
    render() {
      const { data, columns } = this.state;
      return (
        <div className={styles.editableTable}>
          <h3>随访情况</h3>
          <Divider />
          <Table
            scroll={{ x: true }}
            rowKey={'id'}
            rowClassName={() => 'editable-row'}
            bordered
            dataSource={data}
            columns={columns}
            pagination={false}
          />
        </div>
      );
    }
  }
  
  export default EsophagusView;
  